<template>
  <el-dialog
    title="样式设置"
    v-model="visible"
    width="400px"
  >
    <el-form :model="styleForm" label-width="100px">
      <el-form-item label="线条颜色">
        <el-color-picker v-model="styleForm.strokeColor" />
      </el-form-item>
      <el-form-item label="线条宽度">
        <el-slider v-model="styleForm.strokeWidth" :min="1" :max="10" />
      </el-form-item>
      <el-form-item label="填充颜色" v-if="showFill">
        <el-color-picker v-model="styleForm.fillColor" show-alpha />
      </el-form-item>
      <el-form-item label="点大小" v-if="type === 'Point'">
        <el-slider v-model="styleForm.pointSize" :min="4" :max="20" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="applyStyle">应用</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Style, Fill, Stroke, Circle } from 'ol/style'

const props = defineProps({
  type: String,
  modelValue: Boolean
})

const emit = defineEmits(['update:modelValue', 'style-change'])

const visible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})

const showFill = computed(() => ['Polygon', 'Circle'].includes(props.type))

const styleForm = ref({
  strokeColor: '#ffcc33',
  strokeWidth: 2,
  fillColor: 'rgba(255, 255, 255, 0.4)',
  pointSize: 7
})

const applyStyle = () => {
  const style = new Style({
    stroke: new Stroke({
      color: styleForm.value.strokeColor,
      width: styleForm.value.strokeWidth
    }),
    fill: showFill.value ? new Fill({
      color: styleForm.value.fillColor
    }) : undefined,
    image: props.type === 'Point' ? new Circle({
      radius: styleForm.value.pointSize,
      fill: new Fill({
        color: styleForm.value.strokeColor
      })
    }) : undefined
  })
  
  emit('style-change', style)
  visible.value = false
}
</script> 